<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仓库管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col">
                <h2>仓库管理</h2>
            </div>
            <div class="col text-end">
                <button class="btn btn-primary" onclick="showCreateWarehouseModal()">
                    <i class="bi bi-plus"></i> 新建仓库
                </button>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>仓库编号</th>
                                <th>仓库名称</th>
                                <th>地址</th>
                                <th>总容量(m³)</th>
                                <th>已用容量(m³)</th>
                                <th>使用率</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="warehouseList">
                            <!-- 仓库列表 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 新建仓库模态框 -->
    <div class="modal fade" id="createWarehouseModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新建仓库</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="createWarehouseForm">
                        <div class="mb-3">
                            <label class="form-label">仓库名称</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">地址</label>
                            <input type="text" class="form-control" name="address" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">总容量(m³)</label>
                            <input type="number" class="form-control" name="totalCapacity" step="0.01" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="createWarehouse()">创建</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 更新容量模态框 -->
    <div class="modal fade" id="updateCapacityModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">更新已用容量</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="updateCapacityForm">
                        <input type="hidden" name="warehouseId">
                        <div class="mb-3">
                            <label class="form-label">已用容量(m³)</label>
                            <input type="number" class="form-control" name="usedCapacity" step="0.01" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateCapacity()">更新</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function() {
            loadWarehouses();
        });

        function loadWarehouses() {
            $.get('/warehouse/list', function(res) {
                if (res.code === 200) {
                    const warehouses = res.data;
                    let html = '';
                    warehouses.forEach(warehouse => {
                        const usageRate = (warehouse.usedCapacity / warehouse.totalCapacity * 100).toFixed(2);
                        html += `
                            <tr>
                                <td>${warehouse.warehouseNo}</td>
                                <td>${warehouse.name}</td>
                                <td>${warehouse.address}</td>
                                <td>${warehouse.totalCapacity}</td>
                                <td>${warehouse.usedCapacity}</td>
                                <td>
                                    <div class="progress">
                                        <div class="progress-bar ${getProgressBarClass(usageRate)}" 
                                             role="progressbar" 
                                             style="width: ${usageRate}%">
                                            ${usageRate}%
                                        </div>
                                    </div>
                                </td>
                                <td>${new Date(warehouse.createTime).toLocaleString()}</td>
                                <td>
                                    <button class="btn btn-sm btn-info" onclick="viewWarehouse(${warehouse.id})">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                    <button class="btn btn-sm btn-warning" onclick="showUpdateCapacityModal(${warehouse.id})">
                                        <i class="bi bi-arrow-clockwise"></i>
                                    </button>
                                    <button class="btn btn-sm btn-danger" onclick="deleteWarehouse(${warehouse.id})">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        `;
                    });
                    $('#warehouseList').html(html);
                }
            });
        }

        function getProgressBarClass(usageRate) {
            if (usageRate >= 90) return 'bg-danger';
            if (usageRate >= 70) return 'bg-warning';
            return 'bg-success';
        }

        function showCreateWarehouseModal() {
            $('#createWarehouseForm')[0].reset();
            new bootstrap.Modal('#createWarehouseModal').show();
        }

        function createWarehouse() {
            const formData = {};
            $('#createWarehouseForm').serializeArray().forEach(item => {
                formData[item.name] = item.value;
            });

            $.ajax({
                url: '/warehouse',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function(res) {
                    if (res.code === 200) {
                        alert('创建成功');
                        $('#createWarehouseModal').modal('hide');
                        loadWarehouses();
                    } else {
                        alert(res.message);
                    }
                }
            });
        }

        function viewWarehouse(id) {
            // TODO: 实现查看仓库详情
        }

        function showUpdateCapacityModal(id) {
            $('input[name="warehouseId"]').val(id);
            $('#updateCapacityForm')[0].reset();
            new bootstrap.Modal('#updateCapacityModal').show();
        }

        function updateCapacity() {
            const warehouseId = $('input[name="warehouseId"]').val();
            const usedCapacity = $('input[name="usedCapacity"]').val();

            $.ajax({
                url: `/warehouse/${warehouseId}/capacity`,
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify({ usedCapacity: usedCapacity }),
                success: function(res) {
                    if (res.code === 200) {
                        alert('更新成功');
                        $('#updateCapacityModal').modal('hide');
                        loadWarehouses();
                    } else {
                        alert(res.message);
                    }
                }
            });
        }

        function deleteWarehouse(id) {
            if (!confirm('确定要删除这个仓库吗？')) return;

            $.ajax({
                url: `/warehouse/${id}`,
                type: 'DELETE',
                success: function(res) {
                    if (res.code === 200) {
                        alert('删除成功');
                        loadWarehouses();
                    } else {
                        alert(res.message);
                    }
                }
            });
        }
    </script>
</body>
</html> 